<template>
  <div class="record-table-container">
    <el-form class="query-form" inline ref="form" :model="params" :rules="formRules">
      <el-form-item label="姓名">
        <el-input v-model="params.xm" placeholder="请输入" clearable></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="gmsfhm">
        <el-input v-model="params.gmsfhm" placeholder="请输入" clearable></el-input>
      </el-form-item>
      <!-- <el-form-item label="签发时间">
        <el-date-picker v-model="params.qfrq" type="date" value-format="yyyyMMdd" placeholder="请选择"></el-date-picker>
      </el-form-item> -->
      <el-form-item>
        <el-button icon="el-icon-search" @click="onSearch">搜索</el-button>
      </el-form-item>
    </el-form>
    <div class="tabs-box">
      <el-tabs v-model="currentTable" type="card">
        <el-tab-pane label="临期记录" name="1">
          <el-table :data="table" stripe style="width: 100%">
            <el-table-column type="index" label="序号" width="60"></el-table-column>
            <el-table-column prop="xm" label="姓名" width="120"></el-table-column>
            <el-table-column prop="xb" label="性别" width="60"></el-table-column>
            <el-table-column prop="gmsfhm" label="身份证" width="170"></el-table-column>
            <el-table-column prop="zjzdzQhnxxdz" label="暂住地址"></el-table-column>
            <el-table-column prop="djkZzyxq" label="到期时间" width="95"></el-table-column>
            <el-table-column prop="cyts" label="剩余天数" width="100"></el-table-column>
            <el-table-column prop="sbzt" label="操作" width="80">
              <template slot-scope="scoped">
                <a href="javascript:;" class="button" @click="goInfo(scoped.row)">详情</a>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="bottom">
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="changePage"
        :page-size="params.pageSize"
        :total="totalPage">
      </el-pagination>
    </div>

    <detail v-if="detailVisible" :visible="detailVisible" :cardNum="cardNum" @close="closeDetail"></detail>
  </div>
</template>

<script type="text/ecmascript-6">
import { getStore } from '../../utils/storage'
import Detail from './detail'
export default {
  name: 'linqi',
  components: {
    Detail
  },
  data () {
    return {
      params: {
        xm: '',
        gmsfhm: '',
        pageNum: 1,
        pageSize: 10
      },
      totalPage: 0,
      currentTable: '1',
      table: [],
      sexObj: {},
      formRules: {
        gmsfhm: [
          {
            pattern: /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            message: '请输入正确的身份证号',
            trigger: 'change'
          }
        ]
      },
      detailVisible: false,
      cardNum: '',
      rkbm: '',
      id: '',
      sbType: null
    }
  },
  mounted () {
    let sexs = JSON.parse(getStore('dictionary')).XB
    sexs.forEach(item => {
      this.sexObj[item.code] = item.value
    })
    this.queryList()
  },
  methods: {
    // 点击搜索
    onSearch () {
      this.params.xm = this.params.xm.trim()
      this.params.gmsfhm = this.params.gmsfhm.trim()
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.queryList()
        }
      })
    },
    // 查询列表
    async queryList () {
      let res = await this.$http(this.$api.lqRecord, this.params)
      if (res.code === 200) {
        res.data.list.forEach(item => {
          item.xb = this.sexObj[item.xb]
          item.djkZzyxq = item.djkZzyxq ? this.formatDate(item.djkZzyxq) : ''
        })
        this.table = res.data.list
        this.totalPage = res.data.total
      }
    },
    // 切换分页
    changePage (curr) {
      this.params.pageNum = curr
      this.queryList()
    },
    // 查看详情
    goInfo (row) {
      this.detailVisible = true
      this.cardNum = row.gmsfhm
    },
    // 关闭详情
    closeDetail () {
      this.cardNum = ''
      this.detailVisible = false
    },
    formatDate (val) {
      let date = ''
      if (val.length > 6 && val.length <= 8) {
        date = val.slice(0, 4) + '-' + val.slice(4, 6) + '-' + val.slice(6, 8)
      } else if (val.length > 8) {
        date = val.slice(0, 4) + '-' + val.slice(4, 6) + '-' + val.slice(6, 8) + ' ' + val.slice(8, 10) + ':' + val.slice(10, 12) + ':' + val.slice(12, 14)
      } else {
        date = val.slice(0, 4) + '-' + val.slice(4, 6)
      }
      return date
    }
  }
}
</script>

<style lang="scss" scoped>
  .record-table-container {
    width: 100%;
    height: 100%;
    padding: 0 30px;
    box-sizing: border-box;
    .query-form {
      margin-top: 40px;
      /deep/ .el-form-item {
        margin: 0 30px 0 0;
        .el-form-item__label {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
          padding-right: 8px;
        }
        .el-form-item__content {
          .el-input {
            .el-input__inner {
              padding: 0 15px;
              width: 200px;
              height: 30px;
              border: 1px solid #C9C9C9;
              border-radius: 2px;
            }
            .el-input__suffix {
              right: 0;
            }
            &.el-date-editor--date {
              .el-input__inner {
                padding: 0 30px;
              }
              .el-input__suffix {
                right: 22px;
              }
            }
          }

          .el-button {
            padding: 0;
            height: 30px;
            width: 80px;
            background: #02579A;
            border-radius: 2px;
            color: #fff;
            border: none;
          }
        }
      }
    }
    .tabs-box {
      padding-top: 30px;
      /*height: 100%;*/
      box-sizing: border-box;
      /deep/ .el-tabs {
        /*height: 100%;*/
        .el-tabs__header {
          border-bottom: 1px solid #02579A;
          margin-bottom: 30px;
          .el-tabs__nav {
            border: none;
            .el-tabs__item {
              padding: 8px 6px;
              height: auto;
              line-height: 1;
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #02579A;
              border: 1px solid #02579A;
              border-radius: 6px 6px 0 0;
              margin-right: 10px;
              &.is-active {
                color: #fff;
                background-color: #02579A;
              }
            }
          }
        }
        .el-tabs__content {
          /*height: calc(100% - 62px);*/
          .el-tab-pane {
            .el-table {
              .el-table__header-wrapper {
                th {
                  height: 50px;
                  background: #E8EDF1;
                  color: #333;
                }
              }
              .el-table__body-wrapper {
                td {
                  color: #333;
                }
                .el-table__row--striped {
                  td {
                    background-color: hsla(207, 24%, 93%, 0.4);
                  }
                }
              }
              .button {
                margin-right: 10px;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                text-decoration: underline;
                color: #02579A;
                &.warning {
                  color: #F45F37;
                }
                &.disabled {
                  opacity: 0.5;
                  cursor: not-allowed;
                }
              }
            }
          }
        }
      }
    }
    .bottom {
      padding-top: 80px;
      text-align: center;
      /deep/ .el-pagination {
        .btn-prev, .btn-next {
          width: 40px;
          height: 40px;
          border: 1px solid #02579A;
          background-color: #fff;
          color: #02579A;
          .el-icon {
            font-size: 16px;
            font-weight: bold;
          }
        }
        .el-pager {
          .number {
            width: 40px;
            height: 40px;
            line-height: 38px;
            border: 1px solid #02579A;
            background-color: #fff;
            color: #02579A;
            font-weight: normal;
            &.active {
              background-color: #02579A;
              color: #fff;
            }
          }
          .more {
            width: 40px;
            height: 40px;
            line-height: 38px;
            border: 1px solid #02579A;
            background-color: #fff;
            color: #02579A;
            font-weight: normal;
            &.el-icon-d-arrow-right {
              color: #02579A;
            }
          }
        }
        button:disabled {
          opacity: 0.5;
        }
      }
    }
  }
</style>
